<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一个视频区域的遮罩层</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>

<div style="background: #CC00FF;height:200px; width:300px;position:relative;" id="p_div">

        <video id="videoLive" style="" controls="controls" autoplay="autoplay" width="100%" height="280" poster="https://i.ys7.com/static/images/6abdc484fbf44ebf833c7af00be57aab/b722c3dc934db2e78c772aa7b6f6a167/1.jpeg">
            <source src="http://vshare.ys7.com:80/hcnp/540540642_1_2_1_0_183.136.184.7_6500.m3u8" type="video/mp4">
        </video>

     <!--ID为zcdiv的为遮罩层-->

        <div id="zcdiv" style="position:absolute;top:0;left:0;z-index:10000;width:100%;height:100%;background:#000000;">
            <div style="position:relative;width:100%;height:100%;">
                <div id="loading" style="position:absolute;top:37%;left:50%;margin-left:-60px;height:55px;width:150px;border:0px solid red;padding:0;color:white;">
                    <img src="img/Loading.gif" width="50" />
                    <span style="display:inline-block;position:relative;top:-18px;">正在加载</span>
                </div>
            </div>           
        </div>
    </div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
 <button type="button" onclick="show()" >显示隐藏</button>
    <div id="msg2"></div>

JS代码控制显示隐藏
<script language="javascript" type="text/javascript">
 function show() {
            if ($("#zcdiv").is(":hidden")) {
                $("#zcdiv").show();
                $("#msg2").html("显示");
            } else {
                $("#zcdiv").hide();
                $("#msg2").html("隐藏");
            }
        }

</script>


</body>
</html>
